<!--
 * @Descripttion: 图片编辑组件
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-09 13:59:48
 * @LastEditors: GW
 * @LastEditTime: 2021-09-23 15:53:44
-->
<template>
    <section class="edit-wrapper">
        <a-upload-dragger name="file" :action="action" :headers="headers" list-type="text" :before-upload="beforeUpload" :file-list="fileList" class="upload-list-inline" @change="uploadFile">
            <p class="ant-upload-drag-icon">
                <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
                点击上传
                <!-- 点击或者拖动到此区域上传 -->
            </p>
            <p class="ant-upload-hint">
                请选择格式为 jpg、png、jpeg格式 且 小于3M的图片
            </p>
        </a-upload-dragger>
        <a-divider></a-divider>
        <p>链接</p>
        <a-input v-model="data.href" placeholder="请输入图片点击连接"></a-input>
        <a-divider></a-divider>
        <p>图片描述</p>
        <a-textarea :rows="5" class="text-area" v-model="data.text" maxLength="120" placeholder="请输入图片描述"></a-textarea>
        <a-divider></a-divider>
        <p>描述显示位置</p>
        <a-radio-group :options="plainOptions" :default-value="value1" @change="onChangeArea" />
        <a-divider></a-divider>
        <p>描述文字大小 {{fontSize}}px</p>
        <a-slider v-model="fontSize" :default-value="fontSize" @change="onChangeFont" :min="12" :max="60" />
        <p>描述文字颜色 {{fontColor}}</p>
        <a-input v-model="fontColor" type="color" @change="onChangeColor"></a-input>
        <a-divider></a-divider>
        <a-checkbox v-model="data.onPadding">是否有边距</a-checkbox>
    </section>
</template>

<script>
import Vue from "vue";
export default {
    props: {
        data: {
            type: Object,
            default: {}
        },
    },
    data () {
        return {
            action: this.$Global.ApiBaseUrl + '/uploadFile',
            headers: { "Access-Token": Vue.ls.get("Access-Token") },
            value1: '左对齐',
            plainOptions: ['左对齐', '居中', '右对齐', '图片中间'],
            plainOptionsEn: ['left', 'center', 'right'],
            fileList: [],
            fontSize: 14,//文字大小
            fontColor: '#666666',//文字颜色
            textAlign: 'left',
            styleCenter: {},
        }
    },
    methods: {
        uploadFile (backdata) {
            let fileList = backdata.fileList;
            if (fileList.length > 1) {
                this.$message.warning('只能上传一个文件');
                return;
            }
            this.fileList = fileList;

            let file = this.fileList[0].response;
            console.log(this.fileList, file);
            setTimeout(() => {
                if (file && file.status) {
                    if (file.status === 'done') {
                        this.$message.success(`${file.name} 上传成功`);
                        this.data.src = file.url;
                        this.data.title = '图片';
                    }
                    if (file.status === 'error') {
                        this.$message.error(`${file.name} 上传失败`);
                    }
                }
            }, 1000);
        },
        beforeUpload (file) {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJpgOrPng) {
                this.$message.warning('请选择格式为 jpg、png、jpeg格式');
            }
            const isLt2M = file.size / 1024 / 1024 < 3;
            if (!isLt2M) {
                this.$message.warning('只能上传小于3M的图片!');
            }
            return isJpgOrPng && isLt2M;
        },
        onChangeArea (val) {
            //显示位置
            let value = val.target.value;
            if (value == '图片中间') {
                this.textAlign = 'center';
                this.styleCenter = {
                    'position': 'absolute',
                    'top': '40%',
                    'width': '100%',
                    'left': '0',
                    'text-align': 'center',
                }
            } else {
                if (value == '左对齐') {
                    this.textAlign = 'left';
                } else if (value == '居中') {
                    this.textAlign = 'center';
                } else {
                    this.textAlign = 'right';
                }
                this.styleCenter = {};
            }
            this.updateStyle();

        },
        onChangeFont (val) {
            console.log(val)
            //字体大小
            this.fontSize = val;
            this.updateStyle();
        },
        onChangeColor (val) {
            console.log(val)
            //字体颜色
            this.updateStyle();
        },
        updateStyle () {
            let style = {
                'text-align': this.textAlign,
                'font-size': this.fontSize + 'px',
                'color': this.fontColor
            }

            this.data.style = Object.assign({}, style, this.styleCenter);
        }
    }
}
</script>

<style lang="less" scoped>
    .edit-wrapper {
        padding: 10px 10px 28px;
        .text-area {
            resize: none;
        }
    }
</style>